<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css" />
    <!-- <script src="/code/lib/jquery.js"></script> -->
  </head>

  <body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div id="sjh">
      <div class="title">
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
      </div>
      <div class="box">
        <div class="input-item">
          <label>请输入手机号：</label>
          <input type="text" id="phone" />
        </div>
        <button>下一步</button>
      </div>
    </div>
    <!-- --------------------------------------------------->
    <br />

    <div id="mbwt" style="display: none">
      <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span class="active"><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
      </div>
      <div class="box">
        <div class="input-item">
          <label> 用户名：</label>
          <input type="text" value="" id="username" />
        </div>
        <div class="input-item">
          <label> 手机号：</label>
          <input type="text" value="" id="phone" />
        </div>
        <div class="input-item">
          <label>密保问题：</label>
          <input type="text" value="" id="question" />
        </div>
        <div class="input-item">
          <label>密保答案：</label>
          <input type="text" id="answer" />
        </div>
        <button id="prev">上一步</button>
        <button id="next">下一步</button>
      </div>
    </div>

    <!-- --------------------------------------------- -->
    <br />
    <hr />
    <div id="ljcz" style="display: none">
      <div class="title">
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
      </div>
      <div class="box">
        <div class="input-item">
          <label>请输入新密码：</label>
          <input type="password" id="password" />
        </div>
        <button id="preve">上一步</button>
        <button id="goto">立即重置</button>
      </div>
    </div>
    <script src="/lib/jquery.js"></script>
    <script>
      //注册点击事件
      $("#sjh button").on("click", function (e) {
        e.preventDefault();
        console.log(111);
        const phone = $("#sjh #phone").val().trim();
        if (phone.length <= 0) alert("请输入正确的手机号！");
        $.ajax({
          method: "get",
          url: "http://124.223.14.236:3001/api/user/findPwd",
          data: {
            phone,
          },
          success: function (res) {
            console.log(res);
            // 接收返回的数据
            const id = res.data.id;
            const question = res.data.question;
            const phone = res.data.phone;
            const username = res.data.username;
            //将数据传到页面渲染
            $("#mbwt #phone").val(phone);
            $("#question").val(question);
            $("#username").val(username);
            // 切换显示隐藏
            $("#sjh").hide();
            $("#mbwt").show();
            // 给密码答案注册事件
            $("#next").on("click", function (e) {
              e.preventDefault();
              console.log(222);
              const answer = $("#answer").val().trim();
              if (answer.length <= 0) alert("请输入正确的手机号！");
              $("#ljcz").show();
              $("#mbwt").hide();
              // 给立即重置注册点击事件
              $("#goto").on("click", function (e) {
                e.preventDefault();
                console.log(222);
                const password = $("#ljcz #password").val().trim();
                if (password.length <= 0) alert("请输入新的密码！");
                // 提交修改数据
                $.ajax({
                  method: "post",
                  url: "http://124.223.14.236:3001/api/user/resetPwd",
                  data: {
                    id,
                    answer,
                    password,
                  },
                  success: function (res) {
                    console.log(res);
                    //判断响应是否成功
                    if (!res.success) {
                      $("#sjh").show();
                      $("#ljcz").hide();
                      $("#sjh #phone").val("");
                      $("#answer").val("");
                      $("#ljcz #password").val("");
                      return alert(res.msg);
                    } else {
                      alert("密码修改成功！");
                      location.href = '/loginBaseCode/login.html'
                    }
                  },
                });
              });
            }); 
          },
        });
      });
      // 返回上一步操作
      $("#prev").on("click", function () {
        $("#sjh").show();
        $("#mbwt").hide();
      });
      $("#preve").on("click", function () {
        $("#mbwt").show();
        $("#ljcz").hide();
      });
    </script>
  </body>
</html>
